<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb pull-right">
            <a href="#!console">首页</a>
            <a><cite>玩家详细信息</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar nowrap">
            搜索：
            <select id="details-search-key">
                <option value="playerId">玩家ID</option>
            </select>
            <input id="details-search-value" class="layui-input search-input" type="text" placeholder="输入关键字" />&emsp;
            <button id="details-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

        <form id="details-form" lay-filter="details-form" class="layui-form model-form">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;margin-bottom: 10px; border-color:#001529">
                <legend>基础信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">ID:</label>
                <div class="layui-input-block">
                    <input name="playerId" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称:</label>
                <div class="layui-input-block">
                    <input name="nickName" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话:</label>
                <div class="layui-input-block">
                    <input name="phone" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态:</label>
                <div class="layui-input-block">
                    <input name="state" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input name="sex" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;margin-bottom: 10px; border-color:#001529">
                <legend>背包信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">金币:</label>
                <div class="layui-input-block">
                    <input name="money" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">钻石:</label>
                <div class="layui-input-block">
                    <input name="diamond" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;margin-bottom: 10px; border-color:#001529">
                <legend>战斗信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">PVP次数:</label>
                <div class="layui-input-block">
                    <input name="pvpCount" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">PVP等级:</label>
                <div class="layui-input-block">
                    <input name="pvpGrade" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">PVP-WIN:</label>
                <div class="layui-input-block">
                    <input name="pvpWin" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">PVE等级:</label>
                <div class="layui-input-block">
                    <input name="pveGrade" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;margin-bottom: 10px; border-color:#001529">
                <legend>五行信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">五行点数:</label>
                <div class="layui-input-block">
                    <input name="dianShu" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">五行等级:</label>
                <div class="layui-input-block">
                    <div id="details-elements" style="min-width: 400px; max-width: 600px; height: 400px;"></div>
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;margin-bottom: 10px; border-color:#001529">
                <legend>技能信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">技能点数:</label>
                <div class="layui-input-block">
                    <input name="debris" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上阵技能:</label>
                <div class="layui-input-block">
                    <input name="fightSkill" style="border:0px" readonly="readonly" class="layui-input" maxlength="20"
                           lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">已解锁技能:</label>
                <div class="layui-input-block">
                    <table class="layui-table" id="details-table" lay-filter="details-filter"></table>
                </div>
            </div>

        </form>

    </div>
</div>

<script type="text/javascript" src="../../module/id.js"></script>
<script>
    var gradeH = [];
    layui.use(['form', 'table', 'admin', 'layer'], function () {
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var layer = layui.layer;

        var skillJson = [];
        // var skillAll = { "10031": "封魔", "10030": "双重攻击", "1000": "疾风斩", "10019": "神之恩赐", "10018": "能量转换(风)", "10011": "能量转换(火)", "10033": "闪电链", "10010": "灼烧", "10032": "末日审判", "10013": "回春术", "10035": "闪电枷锁", "10012": "缠绕", "10034": "诅咒", "10015": "凋零", "10037": "暗夜旋律", "10014": "绑带治疗", "10036": "能量盾", "10017": "能量转换(山)", "10039": "践踏", "10016": "能量转换(林)", "10038": "雷霆一击", "10020": "战嚎", "1008": "林魔法盾", "1007": "风魔法盾", "10029": "炎爆术", "1006": "山魔法盾", "1005": "时间静止", "1004": "风行术", "1003": "空间转移", "1002": "恢复", "1001": "雷魔法盾", "10022": "夺魂", "10021": "虫洞", "10024": "地震术", "10023": "暗愈术", "10026": "虚弱", "10025": "吞噬", "10028": "毒雾", "1009": "火魔法盾" };

        if (id != -1 && typeof id !== 'undefined') {
            req(id);
        }
        // 搜索按钮点击事件
        $('#details-btn-search').click(function () {
            var playerId = $('#details-search-value').val();
            req(playerId);
        });

        function req(playerId) {
            admin.req('api-select/playerDetailsInfo/' + playerId, {}, function (data) {
                if (0 == data.code) {
                    debugger;
                    // 回显数据
                    var details = data.data[0];
                    // 五行参数解析
                    var e = details.elementsJson;
                    gradeH[0] = e.CT_BLUE;
                    gradeH[1] = e.CT_GREEN;
                    gradeH[2] = e.CT_RED;
                    gradeH[3] = e.CT_YELLOW;
                    gradeH[4] = e.CT_PURPLE;

                    details["fightSkill"] = details.fightSkill;

                    if (details) {
                        form.val('details-form', details);
                        var skillMap = details.skillMap;
                        for (var s in skillMap) {
                            skillJson.push({name:s,grade:skillMap[s]});
                        }
                    }
                    layer.msg('成功', { icon: 1, time: 500 });
                } else {
                    layer.msg('失败', { icon: 2, time: 500 });
                }
            }, 'GET');

            table.render({
                elem: '#details-table'
                , cols: [[
                    { field: 'name', sort: true, title: '技能名称' },
                    { field: 'grade', title: '技能等级' }
                ]]
                , data: skillJson
            });

            clearId();
        }
    });

    var chart = Highcharts.chart('details-elements', {
        chart: {
            polar: true
        },
        credits: {
            enabled: false // 禁用版权信息
        },
        title: {
            text: null //不显示标题
        },
        pane: {
            size: '80%'
        },
        xAxis: {
            categories: ['风', '林', '火', '山', '雷'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },
        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },
        series: [{
            name: '最高等级',
            color: 'red',
            data: [10, 10, 10, 10, 10],
            pointPlacement: 'on'
        }
        , {
            name: '我的等级',
            data: gradeH,
            pointPlacement: 'on'
        }
        ]
    });
</script>